<clr-modal [(clrModalOpen)]="deleteModal" [clrModalSize]="'lg'">
  <h3 class="modal-title">确认删除</h3>
  <div class="modal-body">
    <p>删除操作不可恢复,确认要删除集群:
      <span *ngFor="let cluster of selectedClusters">{{cluster.name}}</span>
    </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn" (click)="deleteModal = false">取消</button>
    <button type="button" class="btn btn-primary" (click)="confirmDelete()">确认</button>
  </div>
</clr-modal>

<clr-datagrid [clrDgLoading]="loading" [clrDgSelected]="selectedClusters">
  <clr-dg-action-bar>
    <div class="btn-group" *ngIf="showItem">
      <button type="button" class="btn btn-sm btn-secondary" (click)="addNewCluster()"
              [disabled]="!hasHostname || !canCreate">
        <clr-icon shape="plus" size="16"></clr-icon>
        添加
      </button>
      <button type="button" class="btn btn-sm btn-secondary" (click)="onDeleted()"
              [disabled]="selectedClusters.length == 0 || !canCreate">
        <clr-icon shape="close"></clr-icon>
        删除
      </button>
    </div>
  </clr-dg-action-bar>
  <clr-dg-column>名称</clr-dg-column>
  <clr-dg-column *ngIf="showItem">所属项目</clr-dg-column>
  <clr-dg-column>离线包</clr-dg-column>
  <clr-dg-column>节点</clr-dg-column>
  <clr-dg-column>云提供商</clr-dg-column>
  <clr-dg-column>部署模式</clr-dg-column>
  <clr-dg-column>部署模型</clr-dg-column>
  <clr-dg-column>部署计划</clr-dg-column>
  <clr-dg-column>状态</clr-dg-column>
  <clr-dg-column>创建时间</clr-dg-column>

  <clr-dg-row *clrDgItems="let cluster of clusters" [clrDgItem]="cluster">
    <clr-dg-cell *ngIf="showItem"><a routerLink="{{cluster.name}}"
                                     [queryParams]="{'itemName':cluster.item_name}">{{cluster.name}}</a></clr-dg-cell>
    <clr-dg-cell *ngIf="!showItem">{{cluster.name}}</clr-dg-cell>
    <clr-dg-cell *ngIf="showItem">{{cluster.item_name}}</clr-dg-cell>
    <clr-dg-cell>{{cluster.resource}}</clr-dg-cell>
    <clr-dg-cell *ngIf="showItem"><a routerLink="{{cluster.name}}/node">{{cluster.nodes.length}}</a></clr-dg-cell>
    <clr-dg-cell *ngIf="!showItem">{{cluster.nodes.length}}</clr-dg-cell>
    <clr-dg-cell>
      <img *ngIf="cluster.cloud_provider ==='vsphere'" width="24px" height="16px" src="assets/images/vsphere.png"/>
      <span [ngSwitch]="cluster.cloud_provider">
          <span *ngSwitchCase="'vsphere'">vSphere</span>
          <span *ngSwitchCase="'openstack'">OpenStack</span>
          <span *ngSwitchDefault>{{cluster.cloud_provider}}</span>
      </span>
    </clr-dg-cell>
    <clr-dg-cell>{{getDeployTypeComment(cluster.deploy_type)}}</clr-dg-cell>
    <clr-dg-cell>{{cluster.template}}</clr-dg-cell>
    <clr-dg-cell>{{cluster.plan}}</clr-dg-cell>
    <clr-dg-cell [ngStyle]="{'color':cluster.status | statusColor }">{{cluster.status | status}}</clr-dg-cell>
    <clr-dg-cell>{{cluster.date_created | date: 'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>

  </clr-dg-footer>

</clr-datagrid>

